<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            :title="editData?'编辑图标':'新增图标'"
            width="500px"
            @opened="handleDialogOpened"
            :before-close="handleClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            status-icon
        >
            <el-form-item label="图标名称" prop="name">
                <el-input v-model.trim="ruleForm.name" />
            </el-form-item>
            <el-form-item label="图标" prop="iconUrl">
                <el-avatar @click="handleUpload" v-if="ruleForm.iconUrl" shape="square" :size="100" :src="ruleForm.iconUrl" fit="contain" />
                <el-button @click="handleUpload" v-else type="primary" plain>上传图标</el-button>
                <p style="font-size: 12px; padding-left: 10px;">建议上传200*200像素图标</p>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model.trim="ruleForm.description" type="textarea" :rows="3" />
            </el-form-item>
        </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="handleConfirm(ruleFormRef)">确 认</el-button>
                </span>
            </template>
        </el-dialog>
        <fileUpload 
            title="上传图标"
            :visible="uploadVisible"
            @close="uploadVisible=false"
            @confirm="handleUploadConfirm"
            >   
        </fileUpload>
    </div>
</template>
  
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch, reactive, nextTick, onMounted, onUnmounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { addIcon, updateIcon } from '@/api/icon';
import * as util from  '@/utils';
import fileUpload from '@/components/fileUpload.vue';

const dialogVisible = ref(false);
const uploadVisible = ref(false);

interface Props {
	visible: boolean;
    editData?: any;
}

interface RuleForm {
  name: string;
  iconUrl: string;
  description: string;
}

const props = defineProps<Props>();
watch(()=>props.visible,val=>{ dialogVisible.value = val })

const emit = defineEmits<{
    'close': [value: any]
}>()

function handleClose(value){
    emit('close',value);
}

const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
    name: '',
    iconUrl: '',
    description: ''
})

const rules = reactive<FormRules<RuleForm>>({
    name: [ { required: true, message: '请填写图标名称', trigger: 'blur' }],
    iconUrl: [ { required: true, message: '请上传图标', trigger: 'blur' }]
})

function handleUpload(){
    uploadVisible.value = true;
    console.log('dakai--')
}

function handleUploadConfirm(data){
    ruleForm.iconUrl = import.meta.env.VITE_FILE_HOST + data[0].path;
}

async function handleDialogOpened(){
    for(let key in ruleForm){
        ruleForm[key] = props.editData?props.editData[key]: '';
    }
    await nextTick();
    ruleFormRef.value.clearValidate();

}   

function handleConfirm(formEl: FormInstance){
    formEl.validate((valid, fields) => {
        if (valid) {
            const params = util.objectCopy(ruleForm);
            const editData = props.editData;
            if(editData){
                updateIcon(editData.id,params).then(res=>{
                    handleClose('update');
                })
            }else{
                addIcon(params).then(res=>{
                    handleClose('update');
                })
            }
        } else {
        console.log('error submit!', fields)
        }
    })
    
}

</script>

<style lang="scss" scoped>

</style>

